<script setup>
  import { ref, computed,reactive } from 'vue'
    import { onLoad } from '@dcloudio/uni-app'
import { reportException } from '../../apis/task';
import { showFailToast } from '../../utils';
  // 组件 ref
  const popup = ref(null)
     // 定义 popup 组件展示的数据
   const exceptionTypes = reactive([
      { text: '发动机启动困难', checked: false },
      { text: '不着车，漏油', checked: false },
      { text: '照明失灵', checked: false },
      { text: '排烟异常、温度异常', checked: false },
      { text: '其他问题', checked: false },
    ])

 // 运输任务ID
  const transportTaskId = ref('')
  onLoad((query) => {
    transportTaskId.value = query.transportTaskId
  })

      // 监听用户选择类型
    function onCheckboxChange(index) {
      // 切换选中状态
      exceptionTypes[index].checked = !exceptionTypes[index].checked
    }
  // 文件提示
  const exceptTime = computed(() => {
    return timePicker.value || '请选择'
  })
  // 获取异常时间
    const exceptionTime = computed(() => {
      return timePicker.value || '请选择'
    })
    // 扩展组件时间初始值
    const timePicker = ref('')

  // 上报位置数据
    const exceptionPlace = ref('')
    // 打开地图，选择位置
    async function onLocationChoose() {
      try {
     // #ifndef APP-PLUS
         const { address } = await uni.chooseLocation({})
         exceptionPlace.value = address
      // #endif

    // #ifdef APP-PLUS
         uni.getLocation({
                success({ latitude, longitude }) {
                  console.log('latitude:', latitude, longitude)
                  uni
                    .chooseLocation({ latitude: latitude, longitude: longitude })
                    .then((res) => {
                      console.log('location:', res.address)
                       exceptionPlace.value = res.address
                    })
                },
              })
    // #endif
      } catch (err) {}
    }

 // 异常描述
  const exceptionDescribe = ref('')
  // 异常描述字数统计
  const wordsCount = computed(() => {
    return exceptionDescribe.value.length
  })

 // 货品图片
  const goodsPictrues = ref([])
  // 数据二次处理，只保留 url 属性
  const exceptionImagesList = computed(() => {
    return goodsPictrues.value.map(({ url }) => {
      return { url }
    })
  })
  // 点击类型弹层确认按钮
  function onPopupConfirm() {
    popup.value.close()
  }

  // 打开弹层
  function onPopupOpen() {
    popup.value.open()
  }

  // 提交数据
   function onFormSubmit() {
     let exceType = exceptionTypes.filter(item => item.checked)
          .map(item => item.text).join("，");
      // 待提交的数据
      const formData = {
        transportTaskId: transportTaskId.value,
        exceptionTime: exceptionTime.value,
        exceptionPlace: exceptionPlace.value,
        exceptionType: exceType,
        exceptionDescribe: exceptionDescribe.value,
        exceptionImagesList: exceptionImagesList.value,
      }
      reportException(formData,res => {
        if(res.code === 200){
          // 跳转到任务列表页面
              uni.reLaunch({ url: '/pages/task/index' })
        }else{
          showFailToast("异常上报失败:" + res.msg)
        }
      })
    }

</script>

<template>
  <view class="page-container">
        <scroll-view class="scroll-view" scroll-y>
          <view class="scroll-view-wrapper">
            <uni-list :border="false">
              <uni-list-item show-arrow title="异常时间">
                <template v-slot:footer>
                  <uni-datetime-picker v-model="timePicker">
                    <view class="picker-value">{{ exceptionTime }}</view>
                  </uni-datetime-picker>
                </template>
              </uni-list-item>
          <uni-list-item
            show-arrow
            clickable
            ellipsis="1"
            @click="onLocationChoose"
            title="上报位置"
            :right-text="exceptionPlace || '请选择'"
          />
          <uni-list-item
            show-arrow
            clickable
            @click="onPopupOpen"
            title="异常类型"
            rightText="请选择"
          />
          <uni-list-item direction="column" title="异常描述">
            <template v-slot:footer>
              <view class="textarea-wrapper">
                <textarea
                  class="textarea"
                   v-model="exceptionDescribe"
                  placeholder="请输入异常描述"
                ></textarea>
                <view class="words-count">0/50</view>
              </view>
            </template>
          </uni-list-item>
          <uni-list-item
            :border="false"
            style="margin-top: -30rpx"
            direction="column"
            title="上传图片（最多6张）"
          >
            <template v-slot:footer>
              <uni-file-picker file-extname="jpg,webp,gif,png" v-model="goodsPictrues" limit="6"></uni-file-picker>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
    </scroll-view>
    <view class="fixbar">
      <button @click="onFormSubmit" class="button disable">提交</button>
    </view>
    <!-- 异常类型弹层 -->
    <uni-popup ref="popup" :mask-click="false" type="bottom">
      <uni-list class="popup-action-sheet">
         <uni-list-item
              v-for="(exceptionType, index) in exceptionTypes"
              :key="exceptionType.text"
              :title="exceptionType.text"
            >
              <template v-slot:footer>
               <checkbox-group @change="onCheckboxChange(index)" class="checkbox">
                  <checkbox :checked="exceptionType.checked" color="#EF4F3F" />
                </checkbox-group>

              </template>

            </uni-list-item>
        <!-- <uni-list-item>
          <template v-slot:header>
            <view class="header">选择类型</view>
          </template>
        </uni-list-item>
        <uni-list-item title="发动机启动困难">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="不着车，漏油">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="照明失灵">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="排烟异常、温度异常">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="其他问题">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item> -->
        <uni-list-item>
          <template v-slot:body>
            <button @click="onPopupConfirm" class="button">确定</button>
          </template>
        </uni-list-item>
      </uni-list>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
